<template>
    <div :style="{height: panelHeight + 'px'}">
        <div class="header" style="height: 40px;background-color: #ffffec;margin-bottom: 1px;">
            <Form ref="formInline" :inline="true" :label-width="80">
                <FormItem prop="name" :label-width="2">
                    <Input placeholder="接口地址" style="width: 400px" v-model="apiRequest.url">
                        <Select name="type" placeholder="GET" slot="prepend" style="width: 80px"
                                v-model="apiRequest.method">
                            <Option value="GET">GET</Option>
                            <Option value="POST">POST</Option>
                            <Option value="PUT">PUT</Option>
                            <Option value="DELETE">DELETE</Option>
                        </Select>
                    </Input>
                </FormItem>
                <FormItem label="接口名称" prop="name">
                    <Input placeholder="接口名称" v-model="apiRequest.name"/>
                </FormItem>
                <FormItem label="接口描述" prop="des">
                    <Input placeholder="接口描述" v-model="apiRequest.des"/>
                </FormItem>
                <FormItem label="返回类型" prop="method">
                    <Select class="ipt" name="type" placeholder="请选择" v-model="apiRequest.type"  style="width: 80px">
                        <Option value="0">自动</Option>
                        <Option value="1">对象</Option>
                        <Option value="2">集合</Option>
                    </Select>
                </FormItem>
                <ButtonGroup type="button">
                    <Button label="large" shape="circle" icon="ios-paper-outline" style="color: green;" @click="save">
                        保存
                    </Button>
                    <Button label="large" shape="circle" icon="md-play" style="color: green;" @click="run">执行</Button>
                    <Button label="large" shape="circle" icon="md-paper-plane" style="color: green;" @click="release"
                            :disabled="releaseClick">
                        发布
                    </Button>
                </ButtonGroup>
            </Form>
        </div>
        <Split v-model="split1" @on-remove-end="resize">
            <template slot="left">
                <MonacoEdit style="margin: 1px;" :language="'sql'"
                            :value="apiRequest.sql" @monacoEditor="monacoMainEditorInit"></MonacoEdit>
            </template>
            <template slot="right">
                <Split v-model="split2" mode="vertical">
                    <template slot="top">
                        <Tabs type="card">
                            <TabPane label="参数">
                                <MonacoEdit style="margin: 2px;width: calc(100%);height: 960px" :language="'json'"
                                            @monacoEditor="monacoParamsEditorInit"></MonacoEdit>
                            </TabPane>
                            <TabPane label="Header">
                                <MonacoEdit style="margin: 2px;width: calc(100%);height: 960px" :language="'json'"
                                            @monacoEditor="monacoHeaderEditorInit"></MonacoEdit>
                            </TabPane>
                        </Tabs>

                    </template>
                    <template slot="bottom">
                        <MonacoEdit style="margin: 2px;width: calc(100%);height:960px" :language="'json'"
                                    :read-only="true"
                                    :value="result"
                                    @monacoEditor="monacoResultEditorInit"></MonacoEdit>
                    </template>

                </Split>
            </template>
        </Split>
    </div>
</template>
<script>

import MonacoEdit from './../../../components/MonacoEdit.vue'


export default {
    name: "addApi",
    components: {
        MonacoEdit
    },
    data() {
        return {
            split1: 0.5,
            split2: 0.5,
            releaseClick: true,
            result: "{\n}",
            params: "{\n}",
            headers: "{\n}",
            monacoMainEditor: null,//  主要编辑器
            monacoParamsEditor: null,//  参数编辑器
            monacoHeaderEditor: null,//  头部编辑器
            monacoResultEditor: null,//  结果处理
            // 主要配置
            apiRequest: {
                id: '',
                url: "",
                des: '',
                method: 'GET',
                name: '',
                sql: '-- 请在下面开始书写sql\n',
                type: '0'
            },
            panelHeight: ''
        }
    },
    mounted: function () {
        let item = sessionStorage.getItem("apiInfo");
        if (item) {
            this.apiRequest = JSON.parse(item)
            this.monacoMainEditor.setValue(this.apiRequest.sql)
        }
        this.resize()
    },

    methods: {
        resize: function () {
            this.panelHeight = document.documentElement.clientHeight - 88;
            const monacoEditorWidth = (document.documentElement.clientWidth * this.split1);
            this.monacoMainEditor.layout({
                height: this.panelHeight,
                width: monacoEditorWidth
            });
            this.monacoParamsEditor.layout()
            this.monacoHeaderEditor.layout()
            this.monacoResultEditor.layout()
        },
        /***
         * 获取对象用动态设置编辑器
         * @param monacoMainEditor
         */
        monacoMainEditorInit: function (monacoMainEditor) {
            this.monacoMainEditor = monacoMainEditor
        },
        monacoParamsEditorInit: function (monacoMainEditor) {
            this.monacoParamsEditor = monacoMainEditor
        },
        monacoHeaderEditorInit: function (monacoMainEditor) {
            this.monacoHeaderEditor = monacoMainEditor
        },
        monacoResultEditorInit: function (monacoMainEditor) {
            this.monacoResultEditor = monacoMainEditor
        },
        /***
         * 测试运行接口
         */
        run: function () {
            if (!this.apiRequest.url && !this.apiRequest.url.startsWith(this.$kit.defaultApi)) {
                this.$Message.error('请输入接口地址且已/api开头')
                return;
            }
            this.apiRequest.sql = this.monacoMainEditor.getValue()
            this.params = this.monacoParamsEditor.getValue()
            this.headers = this.monacoHeaderEditor.getValue()
            // 请求参数处理
            if (!this.params) {
                this.params = {}
            } else {
                this.params = JSON.parse(this.params)
            }
            // 请求头处理
            if (!this.headers) {
                this.headers = {}
            } else {
                this.headers = JSON.parse(this.headers)
            }

            // 测试接口默认参数
            Object.assign(this.params, {
                "HingLoApi": true,
                "method": this.apiRequest.method,
                "type": this.apiRequest.type,
                "sql": this.apiRequest.sql,
            })
            // 如果为post 请求，就在没有指定请求头的情况下，默认json 方式请求
            if (this.apiRequest.method === "POST") {
                if (!this.headers['Content-Type']) {
                    this.headers['Content-Type'] = 'application/json'
                }
            }
            // 正式测试sql 接口
            this.$kit.ajax(this.apiRequest.method, this.apiRequest.url, this.params, this.headers, res => {
                // 格式化代码并赋值
                this.monacoResultEditor.setValue(JSON.stringify(res.data, null, 2))
            }, this)
        },
        /***
         * 保存接口
         */
        save: function () {
            if (!this.apiRequest.url && !this.apiRequest.url.startsWith(this.$kit.defaultApi)) {
                this.$Message.error('请输入接口地址且已' + this.$kit.defaultApi + '开头')
                return;
            }
            if (!this.apiRequest.name) {
                this.$Message.error('请输入接口名称')
                return;
            }
            if (!this.apiRequest.des) {
                this.$Message.error('请输入接口名称')
                return;
            }
            this.apiRequest.sql = this.monacoMainEditor.getValue()
            this.$kit.ajaxJson(this.$res.apiAdd, this.apiRequest, (res => {
                this.$Message.success(res.data.msg)
                this.releaseClick = false
            }), this)
        },
        /***
         * 发布接口
         */
        release: function () {
            this.$kit.ajaxPut(this.$res.apiUpdate, {"id": this.apiRequest.id, state: 2}, (res => {
                this.$Message.success(res.data.msg)
            }), this)
        },


    }
}
</script>

<style scoped>

</style>